<template>
  <div class="Homechir">
    <!--  发货状态  -->
    <div class="Homechir-one">
      <div style="width: 380px;float: left;border-right: 1px solid #E4E9EE;height: 180px;margin-top: 10px;">
        <p style="width: 350px;margin: auto;color: #242526;font-size: 16px;margin-top: 15px;height: 35px;line-height: 35px;">订单号：{{count.orderNumber}}</p>
        <p style="width: 350px;margin: auto;color: #F56C6C;font-size: 21px;height: 35px;line-height: 35px">{{ distriStatus === 0 ? '申请中' : (distriStatus === 1 ? '已退款' : (distriStatus === 2 ? '拒绝退款' : (distriStatus === 3 ? '退款中' : '同意退款'))) }}</p>
      </div>
      <div style="width: calc(100% - 380px);float: left;height: 78px;margin-top: 65px;padding: 0 20px">
        <Steps v-if="status === -1" :current="distriStatus === 0 || distriStatus === 3 || distriStatus === 4 ? 3 : 4" align-center process-status="wait">
          <Step title="药店接收订单" style="width: auto" icon="ios-checkmark"></Step>
          <Step title="用户申请退款" style="width: auto" icon="ios-checkmark"></Step>
          <Step title="待药店审核" style="width: auto" icon="ios-checkmark"></Step>
          <Step title="待运营审核" style="width: auto" icon="ios-checkmark"></Step>
          <Step v-if="distriStatus === 1" title="退款成功" style="width: auto" icon="ios-checkmark"></Step>
          <Step v-if="distriStatus === 2" title="拒绝退款" style="width: auto" icon="ios-checkmark"></Step>
        </Steps>
        <Steps v-else :current="distriStatus === 0 || distriStatus === 3 || distriStatus === 4 ? 3 : 4" align-center process-status="wait">
          <Step title="药店接收订单" style="width: auto" icon="ios-checkmark"></Step>
          <Step v-if="status === 0" title="处方二审驳回" style="width: auto" icon="ios-checkmark"></Step>
          <Step v-else title="处方二审成功" style="width: auto" icon="ios-checkmark"></Step>
          <Step title="待运营审核" style="width: auto" icon="ios-checkmark"></Step>
          <Step v-if="distriStatus === 1" title="退款成功" style="width: auto" icon="ios-checkmark"></Step>
          <Step v-if="distriStatus === 2" title="拒绝退款" style="width: auto" icon="ios-checkmark"></Step>
        </Steps>
      </div>
    </div>
    <!--  订单信息  -->
    <div class="Homechir-sel" style="padding-top: 10px;height: 300px">
      <div style="width: 380px;height: 280px;float: left;border-right: 1px solid #E4E9EE;">
        <p style="width: 350px;margin:0;margin-left: 20px;color: #242526;font-size: 16px;line-height: 30px;height: 30px;margin-top: 10px">订单信息</p>
        <p style="width: 350px;margin:0;margin-left: 20px;color: #242526;font-size: 13px;line-height: 30px;height: 30px;">收货人: {{ count.receiverName ? count.receiverName : '暂无收货人' }}</p>
        <p style="width: 350px;margin:0;margin-left: 20px;color: #242526;font-size: 13px;line-height: 30px;height: 30px;">联系电话: {{ count.receiverPhone ? count.receiverPhone : '暂无联系电话' }}</p>
        <p style="width: 350px;margin:0;margin-left: 20px;color: #242526;font-size: 13px;line-height: 30px;height: 30px;">收货地址: {{ count.detailAddress ? count.detailAddress : '暂无收货地址' }}</p>
        <p style="width: 350px;margin:0;margin-left: 20px;color: #242526;font-size: 13px;line-height: 30px;height: 30px;">交易流水号: {{ count.transactionId ? count.transactionId : '暂无订单号' }}</p>
        <p style="width: 350px;margin:0;margin-left: 20px;color: #242526;font-size: 13px;line-height: 30px;height: 30px;">支付方式: 微信支付</p>
      </div>
      <div style="width: calc(100% - 380px);float: left;">
        <p style="width: 90%;margin: 0 auto 0 auto;color: #242526;font-size: 16px;line-height: 30px;height: 30px;margin-top: 10px">药品清单</p>
        <div style="width: 90%;margin: 0 auto 0 auto;text-align: center">
            <Table
              :columns="columns1"
              :data="data2"
              height="200"
              style="width: 100%;text-align: center"
              :header-cell-style="{background:'#FAFAFA',color:'#242526',border: '1px solid #E8E8E8 !important','text-align': 'center',height: '30px !important', padding: '8px 0'}"
              :cell-style="{background:'#ffffff',color:'#242526',border: '1px solid #E8E8E8 !important','text-align': 'center',height: '30px !important', padding: '8px 0'}"
            ></Table>
        </div>
        <p style="text-align: right;width: 90%;margin: 0 auto 0 auto;color: #242526;font-size: 12px;height: 30px;line-height: 30px">订单药品金额：<span>￥{{ count.amt }}</span><span style="display: inline-block;margin-left: 20px;">订单配送费：<span>￥{{ count.distributionFee ? count.distributionFee : '0' }}</span></span><span style="display: inline-block;color: #FD5C72;margin-left: 20px;">支付总金额：<span>￥{{ count.drugMoney ? count.drugMoney : '0' }}</span></span></p>
      </div>
    </div>
    <!--  退款信息  -->
    <div class="Homechir-sel" style="display: flex;flex-direction: row;min-height: 225px">
      <div style="width: 380px;border-right: 1px solid #E4E9EE;padding-bottom: 10px">
        <p style="width: 350px;margin:0;margin-left: 20px;color: #242526;font-size: 16px;line-height: 30px;height: 30px;margin-top: 10px">退款信息</p>
        <p style="width: 350px;margin:0;margin-top: 10px;margin-left: 20px;color: #242526;font-size: 13px;line-height: 22px;height: 22px;">订单编号: {{ count.orderNumber }}</p>
        <p style="width: 350px;margin:0;margin-left: 20px;color: #242526;font-size: 13px;line-height: 30px;height: 30px;">退款发起: 用户发起</p>
        <p style="width: 350px;margin:0;margin-left: 20px;color: #242526;font-size: 13px;line-height: 30px;height: 30px;">退款人: {{ count.receiverName ? count.receiverName : '暂无退款人' }}</p>
        <p style="width: 350px;margin:0;margin-left: 20px;color: #242526;font-size: 13px;line-height: 30px;height: 30px;">联系电话: {{ count.receiverPhone ? count.receiverPhone : '暂无联系电话' }}</p>
        <p style="width: 350px;margin:0;margin-left: 20px;color: #242526;font-size: 13px;line-height: 22px;word-wrap:break-word;">退款原因: {{ count.reason }}</p>
        <p style="width: 350px;margin:0;margin-left: 20px;color: #242526;font-size: 13px;line-height: 30px;height: 30px;">退款时间: {{ count.refundTime }}</p>
        <p v-if="refundEntity.auditorReason" style="width: 350px;margin:0;margin-left: 20px;color: #242526;font-size: 13px;line-height: 25px;">驳回信息: {{ refundEntity.auditorReason }}</p>
      </div>
      <div style="width: calc(100% - 380px);">
        <p style="width: 90%;margin: 0 auto;color: #F56C6C;height: 60px;line-height: 60px;font-size: 14px;text-align: center">退款协议记录</p>
        <div style="width: 90%;margin: 0 auto;text-align: center">
          <div style="width: 100%;margin: 0 auto;text-align: center">
            <div style="width: 100%;display: flex;flex-direction: row;border: 1px solid #E8E8E8;">
              <p style="background-color: #FAFAFA;margin: 0;width: 34%;height: 50px;line-height: 50px;border-right: 1px solid #E8E8E8;">处理时间</p>
              <p style="background-color: #FAFAFA;margin: 0;width: 33%;height: 50px;line-height: 50px;border-right: 1px solid #E8E8E8;">处理信息</p>
              <p style="background-color: #FAFAFA;margin: 0;width: 33%;height: 50px;line-height: 50px;">操作账号</p>
            </div>
            <div style="width: 100%;display: flex;flex-direction: row;border: 1px solid #E8E8E8;" v-if="refundEntity.pharmacyAuditor">
              <p style="background-color: #FAFAFA;margin: 0;width: 34%;height: 50px;line-height: 50px;border-right: 1px solid #E8E8E8;">{{ refundEntity.pharmacyAuditorTime }}</p>
              <p style="background-color: #FAFAFA;margin: 0;width: 33%;height: 50px;line-height: 50px;border-right: 1px solid #E8E8E8;">{{ refundEntity.pharmacyStatus === -1 ? '不需要审核' : (refundEntity.pharmacyStatus === 0 ? '待审核' : (refundEntity.pharmacyStatus === 1 ? '退款' : '拒绝')) }}</p>
              <p style="background-color: #FAFAFA;margin: 0;width: 33%;height: 50px;line-height: 50px;">{{ refundEntity.pharmacyAuditor }}</p>
            </div>
            <div style="width: 100%;display: flex;flex-direction: row;border: 1px solid #E8E8E8;" v-if="refundEntity.auditor">
              <p style="background-color: #FAFAFA;margin: 0;width: 34%;height: 50px;line-height: 50px;border-right: 1px solid #E8E8E8;">{{ refundEntity.auditorTime }}</p>
              <p style="background-color: #FAFAFA;margin: 0;width: 33%;height: 50px;line-height: 50px;border-right: 1px solid #E8E8E8;">{{ refundEntity.orderStatus === 0 ? '申请中' : (refundEntity.orderStatus === 1 ? '已退款' : (refundEntity.orderStatus === 2 ? '拒绝退款' : (refundEntity.orderStatus === 3 ? '退款中' : '同意退款'))) }}</p>
              <p style="background-color: #FAFAFA;margin: 0;width: 33%;height: 50px;line-height: 50px;">{{ refundEntity.auditor }}</p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div style="width: 190px;margin-top: 10px; float: right">
      <Button v-show="distriStatus === 0" style="width: 100px;background-color: #1ca2ff;color: white" @click="handleExporDetail">处理申请</Button>
      <Button style="width: 75px;background-color: #1ca2ff;color: white" @click="handlebacks">关闭</Button>
    </div>
    <Modal
      v-model="fundcode"
      title="退款处理"
      :footer="null">
      <Form ref="formValidate" :model="formItem" :rules="formItemRule" :label-width="80">
        <FormItem label="处理方式：">
          退款
        </FormItem>
        <FormItem label="处理结果：">
          <RadioGroup v-model="formItem.orderStatus">
            <Radio :label="4">同意退款</Radio>
            <Radio :label="2">驳回</Radio>
          </RadioGroup>
        </FormItem>
        <template v-if="formItem.orderStatus === 4">
          <FormItem label="支付金额：">{{count.refundMoney}}元</FormItem>
          <FormItem label="支付方式：">微信支付</FormItem>
        </template>
        <FormItem v-if="formItem.orderStatus === 2" label="驳回原因：" :prop="orderStatus" :rules="{required: true, message: '请填写驳回原因', trigger: 'change' }">
          <Input type="textarea" v-model="formItem.auditorReason" />
        </FormItem>
      </Form>
      <div slot="footer">
        <div class="btn-group">
          <Button @click="fundcode = false">取消</Button>
          <Button type="primary" @click="handleFeeBack">确认</Button>
        </div>
      </div>
    </Modal>
  </div>
</template>

<script>
import api from "@/api/commonApi";
export default {
  name: 'Phachir',
  data() {
    return {
      formItem: {
        orderStatus: 4, // 4退款 2驳回
        auditorReason: null
      },
      formItemRule: [],
      status: -1,
      distriStatus: null,
      fundcode: false,
      count: {},
      data2: [],
      columns1: [
        { title: "药品通用名", key: "itemname", align: "center"},
        { title: "规格", key: "itemspec", align: "center"},
        { title: "剂型", key: "ypjx", align: "center"},
        { title: "单位", key: "itemdoseunit", align: "center"},
        { title: "数量", key: "itemdose", align: "center"},
        { title: "售价", key: "price", align: "center"}
      ],
      refundEntity: {}
    }
  },
  created () {
    let breadList = [
      { path: "/index", title: "首页" },
      {
        path: "",
        title: "退费审批管理"
      },
      {
        path: "operation/prescriptionmanage/ordersearch/review",
        title: "处方退费"
      }
    ];
    this.$emit("changeBreadList", breadList);
  },
  mounted () {
    this.distriStatus = parseInt(localStorage.getItem('orderStatus'));
    this.ishomeget();
  },
  methods: {
    handleFeeBack() {
      if (this.formItem.orderStatus === 2 && !this.formItem.auditorReason) {
        this.$Message.error('请填写驳回原因');
      } else {
        const reqBody = { ...this.formItem };
        this.$axios.post(api.refundOperateAuditor.replace('{id}', this.$route.query.id), reqBody).then(resp => {
          this.$Message.success('操作成功');
          this.$router.back();
        }).catch(err => {
        });
      }
    },
    ishomeget () {
      const map = {
        clinicId: this.$route.params.id
      }
      this.$axios
        .post(api.refundgetDetails, map)
        .then(res => {
          if (res.data.code === 1) {
            this.count = res.data.object;
            this.status = parseInt(res.data.object.status);
            this.data2 = res.data.object.clinicBillEntityList;
            this.refundEntity = res.data.object.refundEntity;
          } else {
            this.$Message.error("请求异常");
          }
        })
    },
    handleExporDetail() {
      // 处理申请按钮
      this.fundcode = true
    },
    handlebacks() {
      localStorage.removeItem('orderStatus')
      this.$router.back()
    }
  }
}
</script>

<style lang="less" scoped>
  .ivu-steps {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    font-size: 0;
    line-height: 1.5;
  }
  .ivu-steps-item:last-child{
    flex: none !important;
  }
  .Homechir .ivu-steps-item{
    display: inline-block;
    position: relative;
    vertical-align: top;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    overflow: hidden;
  }
  .Homechir {
    width: 100%;
    min-width: 1000px;
    padding-bottom: 25px;
    .Homechir-one,
    .Homechir-sel{
      width: calc(100% - 50px);
      margin: auto;
      margin-top: 25px;
      min-height: 200px;
      background-color: white;
      box-shadow:0px 0px 15px 0px rgba(127,127,127,0.1);
      border-radius:10px;
    }
  }
</style>
